@use 'sass:math';

// core
.p-speeddial {
    position: absolute;
    display: flex;
}

.p-speeddial-button {
    z-index: 1;
}

.p-speeddial-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0s linear 0.2s;
    pointer-events: none;
    z-index: 2;
}

.p-speeddial-item {
    transform: scale(0);
    opacity: 0;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
    will-change: transform;
}

.p-speeddial-action {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
    position: absolute;
}

.p-speeddial-rotate {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    will-change: transform;
}

.p-speeddial-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p-speeddial-mask-visible {
    pointer-events: none;
    opacity: 1;
    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.p-speeddial-opened .p-speeddial-list {
    pointer-events: auto;
}

.p-speeddial-opened .p-speeddial-item {
    transform: scale(1);
    opacity: 1;
}

.p-speeddial-opened .p-speeddial-rotate {
    transform: rotate(45deg);
}

// theme
.p-speeddial-button {
    &.p-button.p-button-icon-only {
        width: $speedDialButtonWidth;
        height: $speedDialButtonHeight;

        .p-button-icon {
            font-size: $speedDialButtonIconFontSize;
        }

        .p-icon {
            width: $speedDialButtonIconFontSize;
            height: $speedDialButtonIconFontSize;
        }
    }
}

.p-speeddial-list {
    outline: 0 none;
}

.p-speeddial-item {
    &.p-focus > .p-speeddial-action {
        @include focused();
    }
}

.p-speeddial-action {
    width: $speedDialActionWidth;
    height: $speedDialActionHeight;
    background: $speedDialActionBg;
    color: $speedDialActionTextColor;
    outline-color: transparent;
    transition: $actionIconTransition;

    &:hover {
        background: $speedDialActionHoverBg;
        color: $speedDialActionTextHoverColor;
    }
}

.p-speeddial-direction-up {
    .p-speeddial-item {
        margin: math.div($inlineSpacing, 2) 0;

        &:first-child {
            margin-bottom: $inlineSpacing;
        }
    }
}

.p-speeddial-direction-down {
    .p-speeddial-item {
        margin: math.div($inlineSpacing, 2) 0;

        &:first-child {
            margin-top: $inlineSpacing;
        }
    }
}

.p-speeddial-direction-left {
    .p-speeddial-item {
        margin: 0 math.div($inlineSpacing, 2);

        &:first-child {
            margin-right: $inlineSpacing;
        }
    }
}

.p-speeddial-direction-right {
    .p-speeddial-item {
        margin: 0 math.div($inlineSpacing, 2);

        &:first-child {
            margin-left: $inlineSpacing;
        }
    }
}

.p-speeddial-circle,
.p-speeddial-semi-circle,
.p-speeddial-quarter-circle {
    .p-speeddial-item {
        margin: 0;

        &:first-child,
        &:last-child {
            margin: 0;
        }
    }
}

.p-speeddial-mask {
    background-color: $maskBg;
    border-radius: $borderRadius;
}